<template>
    <div>
        {{info.name}}
        {{name}}

        <button @click="changeData">修改name</button>
    </div>
</template>
<script>
import { reactive, ref, watch } from 'vue';
export default {
    setup() {
        const info = reactive({name: "yzh", age: 18});
        const name = ref("qzt")

        watch([() => ({...info}), name], ([newInfo, newName] ,[oldInfo, oldName]) => {
            console.log(newInfo, newName, oldInfo, oldName)
        })

        const changeData = () => {
            info.name = "ace";
            name.value = "sabo"
        };

        return {
            info,
            changeData,
            name
        }
    }
}
</script>
<style>
</style>
